<template>
  <div class="usertimetable h5_min">
    <navconH5 :texts="titles" :leftShow="true" :home="true" :solits="true">
      <template #title>
        <span class="site-title" @click="datashow = true"
          >{{ dayjs(form.date).format('YYYY-MM-DD')+'数据' }} <el-icon><CaretBottom /></el-icon
        ></span>
      </template>
    </navconH5>
    <!-- <button class="passbutton" @click="usertimetableapis">获取数据</button> -->

    <div style="height: 100%; max-height: 100%" class="password_boxs1">
      <div
        class="password_boxs_list"
        v-for="(item, index) in formdata"
        :key="index"
      >
        <p class="title_p">{{ item.province }}</p>
        <div class="usertimetablelist_texts">
          <p
            class="usertimetablelist_item_shoop"
            :class="index2 == item.timetable.length - 1 ? 'borderhide' : ''"
            v-for="(item2, index2) in item.timetable"
            :key="index2"
          >
            {{ item2.school_name }}
          </p>
        </div>
      </div>

       <div v-if="formdata.length==0">
      
          <el-empty :description="`暂无${ dayjs(form.date).format('YYYY年MM月DD日')}数据`"  />
       </div>
      
    </div>

    <t-popup
      v-model="datashow"
      placement="bottom"
      :close-on-overlay-click="true"
      :show-overlay="true"
    >
      <t-date-time-picker
        @cancel="visiblehide"
        @confirm="receptionData"
        :end="dayjs().format('YYYY-MM-DD')"
        :value=" dayjs(form.date).format('YYYY-MM-DD')"
        :mode="['date']"
        title="选择日期"
        format="YYYY-MM-DD"
      />
    </t-popup>
  </div>
</template>

<script>
import navconH5 from "@/components/navconH5.vue";
import dayjs from "dayjs"; //引入dayjs

import { usertimetable } from "@/api/api";
import { IconFont } from "tdesign-icons-vue-next";
export default {
  components: { navconH5, IconFont },
  data() {
    return {
      form: {},
      formdata: [],
      datashow: false, //显示时间
      dayjs: dayjs,

    };
  },
  computed: {
    titles() {
      return this.form.date + "数据";
    },
  },
  mounted(open) {
    this.form = this.$route.query;
    this.usertimetableapis();
  },
  created(open) {},
  methods: {
    usertimetableapis() {
      let vm = this;

      usertimetable(this.form)
        .then((res) => { 
          this.formdata = res.data.data; 
          // vm.$message.success(res.msg || "数据加载成功");
        })
        .catch((err) => {
          vm.$message.error(res.msg || "加载失败");
          router.replace({ path: "/indexs" });
        });
    },
    visiblehide(e){
       this.datashow = false;
    },
    receptionData(e){
      // 当前选择 
       
      this.form.date = e;
      this.usertimetableapis();
      this.datashow = false;
    }
  },
};
</script>

<style lang="scss" scoped>
body {
}

.h5_min {
  display: flex;
  height: 100vh;
  background: linear-gradient(180deg, #e6f6e9 36.18%, #fef5e4 100%);

  flex-direction: column;
}

.password_boxs1 {
  //   padding: 15px;
  box-sizing: border-box;
  overflow-y: auto;
}
.password_boxs {
  font-size: 16px;
  padding: 0 15px;
  padding-top: 5vh;
}

.user-info-password {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  font-size: 14px;
  margin-top: 5vh;
}

.user-info-password-texts {
  .texts {
    font-size: 25px;
  }

  .texts2 {
    font-size: 16px;
  }

  font-size: 20px;
  line-height: 35px;
}

.passbutton {
  margin-top: 5vh;
  width: 100%;
}
.password_boxs_list {
  border-radius: 20px;
  padding: 15px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.title_p {
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: bold;
  padding-left: 15px;
}
.usertimetablelist_texts {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  padding: 0 15px;
  box-sizing: border-box;
  .usertimetablelist_item_shoop {
    padding: 15px 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(180, 180, 180, 0.1);
  }
  .borderhide {
    border: aliceblue;
  }
}
</style>
<style>
</style>